<template>
  <div v-loading="fullscreenLoading"
       class="homeWrap">
    <el-tabs class="tabswrap"
             v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="人员管理"
                   name="first">
        <div class="cus-but">
          <el-button type="primary"
                     size="mini"
                     @click="addUserClick">新建人员</el-button>
        </div>
        <el-dialog title="员工管理"
                   :visible.sync="addstaff"
                   :close-on-click-modal="false"
                   width="30%"
                   center>
          <el-row type="flex"
                  align="middle"
                  justify="center">
            <el-form label-width="100px"
                     :model="addUserForm"
                     ref="addUserForm"
                     style="width: 85%">
              <el-form-item class="is-required"
                            label="姓名："
                            prop="name">
                <el-input v-model="addUserForm.name"
                          placeholder="请输入员工姓名"
                          size="small" />
              </el-form-item>
              <el-form-item class="is-required"
                            label="邮箱："
                            prop="account">
                <el-input v-model="addUserForm.account"
                          :disabled="addUserForm.id > 0"
                          placeholder="用于登录账号使用"
                          size="small" />
              </el-form-item>
              <el-form-item class="is-required"
                            label="登录密码："
                            prop="password">
                <el-input v-model="addUserForm.password"
                          placeholder="请输入员工登录密码"
                          show-password
                          size="small" />
              </el-form-item>
              <el-form-item class="is-required"
                            label="确认密码："
                            prop="password2">
                <el-input v-model="addUserForm.password2"
                          placeholder="请再次输入员工密码"
                          show-password
                          size="small" />
              </el-form-item>
              <el-form-item class="is-required"
                            label="所属部门："
                            prop="id_depart">
                <el-select v-model="addUserForm.id_depart"
                           filterable
                           placeholder="选择部门"
                           size="small"
                           style="width: 100%">
                  <el-option v-for="item in owndepartlist"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                  <!-- <el-option label="运营部1" value="1"></el-option> -->
                  <!-- <el-option label="运营部12" value="2"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item class="is-required"
                            label="角色："
                            prop="id_role">
                <el-select v-model="addUserForm.id_role"
                           filterable
                           placeholder="选择角色"
                           size="small"
                           style="width: 100%">
                  <el-option v-for="item in ownroles"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                  <!-- <el-option label="普通员工" value="1"></el-option> -->
                  <!-- <el-option label="负责人" value="2"></el-option>
                                        <el-option label="管理员" value="2"></el-option> -->
                </el-select>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row type="flex"
                  align="middle"
                  justify="center">
            <el-button size="small"
                       @click="cancelAddUser">取 消</el-button>
            <el-button size="small"
                       type="primary"
                       @click="addUserPost"
                       v-loading.fullscreen.lock="fullscreenLoading">确定</el-button>
          </el-row>
        </el-dialog>
        <div class="form-wrapper"
             style="width: 300px;margin-bottom:20px;">
          <el-input maxlength="20"
                    placeholder="请输入姓名搜索"
                    size="small"
                    v-model="searchUser"
                    @keyup.enter.native="searchUserClick">
            <el-button slot="append"
                       @click="searchUserClick"
                       icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <el-table :data="userlist"
                  border
                  :header-cell-style="{
            'text-align': 'center',
            background: 'rgb(84, 92, 100)',
            color: 'rgb(255, 255, 255)',
          }"
                  style="width: 100%">
          <el-table-column prop="name"
                           label="姓名"
                           align="center">
          </el-table-column>
          <el-table-column prop="depart"
                           label="部门"
                           align="center">
          </el-table-column>
          <el-table-column prop="role"
                           label="角色"
                           align="center">
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-switch v-if="scope.row.is_update == 1"
                         v-model="scope.row.status"
                         :active-value="0"
                         :inactive-value="1"
                         active-text="停用账户"
                         @change="changeStatus(scope.row)"></el-switch>
              <el-button v-if="scope.row.is_update == 1"
                         style="margin-left: 10px"
                         size="mini"
                         type="primary"
                         @click="modifyUser(scope.$index, scope.row)">修改</el-button>
              <el-button v-if="scope.row.is_delete == 1"
                         style="margin-left: 10px"
                         size="mini"
                         type="danger"
                         @click="delUser(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex"
                justify="end"
                style="margin-top: 20px; backgroundcolor: #fff">
          <el-pagination background
                         layout="prev, pager, next"
                         :current-page.sync="curPage"
                         :total="userTotal"
                         :page-size="pageSize"
                         @current-change="handleCurrentChange('user', $event)">
          </el-pagination>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="部门管理"
                   name="second">
        <div class="cus-but">
          <el-button type="primary"
                     size="mini"
                     @click="addDepartShow">新建部门</el-button>
        </div>
        <el-dialog title="部门管理"
                   :visible.sync="adddepart"
                   :close-on-click-modal="false"
                   width="30%"
                   center>
          <el-row type="flex"
                  align="middle"
                  justify="center">
            <el-form label-width="100px"
                     :model="addDepartForm"
                     ref="addDepartForm"
                     style="width: 85%">
              <el-form-item class="is-required"
                            label="部门名称"
                            prop="name">
                <el-input v-model="addDepartForm.name"
                          placeholder="请输入部门名称"
                          size="small" />
              </el-form-item>
              <el-form-item class="is-required"
                            label="负责人："
                            prop="id_admin">
                <el-select v-model="addDepartForm.id_admin"
                           filterable
                           placeholder="选择人员"
                           size="small"
                           style="width: 100%"
                           remote
                           :remote-method="getUserList"
                           :loading="loading">
                  <el-option v-for="item in departUsers"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                  <!-- <el-option label="李四" value="2"></el-option> -->
                </el-select>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row type="flex"
                  align="middle"
                  justify="center">
            <el-button size="small"
                       @click="cancelAddDepart">取 消</el-button>
            <el-button size="small"
                       type="primary"
                       @click="addDepartPost"
                       v-loading.fullscreen.lock="fullscreenLoading">确定</el-button>
          </el-row>
        </el-dialog>
        <el-table :data="departlist"
                  border
                  :header-cell-style="{
            'text-align': 'center',
            background: 'rgb(84, 92, 100)',
            color: 'rgb(255, 255, 255)',
          }"
                  style="width: 100%">
          <el-table-column prop="name"
                           label="部门"
                           align="center">
          </el-table-column>
          <el-table-column prop="admin"
                           label="负责人"
                           align="center">
          </el-table-column>
          <el-table-column prop="status"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_update == 1"
                         style="margin-left: 10px"
                         size="mini"
                         type="primary"
                         @click="modifyDepart(scope.$index, scope.row)">修改</el-button>
              <el-button v-if="scope.row.is_delete == 1"
                         style="margin-left: 10px"
                         size="mini"
                         type="danger"
                         @click="delDepart(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { pageParams, checkRole, parseTime } from "@/settings";
import { get, post } from "../../utils/axios.js";
import { getToken } from '../../utils/auth.js';
const PASSWORD_MARK = "***************";
export default {
  data () {
    return {
      searchUser: "",
      curPageProject: 1,
      curPage: 1,
      userTotal: 0,
      pageSize: 20,
      loading: false,
      fullscreenLoading: false,
      activeName: "first",
      addstaff: false,
      adddepart: false,
      owndepartlist: [], //部门名称列表
      ownroles: [], //角色选项列表
      roles: [],
      userlist: [], //人员列表
      departlist: [], //部门列表
      departUsers: [], //部门负责人列表
      addUserForm: {
        id: 0,
        name: "",
        account: "",
        password: "",
        password2: "",
        id_depart: "",
        id_role: "",
      },
      addDepartForm: {
        id: 0,
        name: "",
        id_admin: "",
      },
    };
  },
  mounted () {
    this.reqDepartList();
    this.reqUserList();
    this.reqRole();

  },
  methods: {
    emptyUser () {
      this.addUserForm = {
        id: 0,
        name: "",
        account: "",
        password: "",
        password2: "",
        id_depart: "",
        id_role: "",
      };
    },
    emptyDepart () {
      this.addDepartForm = {
        id: 0,
        name: "",
        id_admin: "",
      };
    },
    handleCurrentChange (val) {
      this.reqUserList({ page: val });
    },
    reqRole () {
      this.fullscreenLoading = true;
      get("/api/user/roles").then((res) => {
        this.fullscreenLoading = false;
        this.ownroles = res.data.data;
      });
    },
    //请求部门列表
    reqDepartList () {
      this.fullscreenLoading = true;
      get("/api/depart/list").then((res) => {
        this.fullscreenLoading = false;
        if (res.data.code == 1) {
          this.departlist = res.data.data;
        }
        this.departlist.map((item) => {
          this.owndepartlist.push(item);
        });
      });
    },
    searchUserClick () {
      this.reqUserList();
    },
    reqUserList () {
      this.fullscreenLoading = true;
      let param = {
        number: this.pageSize,
        name: this.searchUser,
        page: this.curPage ? this.curPage : 1,
      };
      get("/api/user/list", param).then((res) => {
        this.fullscreenLoading = false;
        if (res.data.code == 1) {
          this.departUsers = res.data.data;
          this.userlist = res.data.data;
          this.userTotal = res.data.total;
        }
      });
    },
    handleClick (tab, event) {
    },
    delUser (index, item) {
      this.$confirm(
        "此操作将删除该人员[" + item.name + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.fullscreenLoading = true;
          this.$axios
            .get("/api/user/del", { id: item.id })
            .then((e) => {
              if (e.data.cpde == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "warning",
                  message: e.data.msg,
                });
              }
              this.fullscreenLoading = false;
              this.reqUserList();
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
        })
        .catch(() => { });
    },
    //修改人员
    modifyUser (index, item) {
      item.password = PASSWORD_MARK;
      item.password2 = PASSWORD_MARK;
      for (let key in this.addUserForm) {
        this.addUserForm[key] = item[key] ? item[key] : "";
      }
      this.addstaff = true;
    },

    //新建人员
    addUserClick () {
      this.addstaff = true;
    },
    addUserPost () {
      this.fullscreenLoading = true;
      this.addstaff = false;
      let param = JSON.parse(JSON.stringify(this.addUserForm));
      if (param["password"] == PASSWORD_MARK) {
        param["password"] = "";
        param["password2"] = "";
      }
      post("/api/user/add", param)
        .then((res) => {
          this.fullscreenLoading = false;
          if (res.data.code == 1) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.reqUserList();
            this.emptyUser();
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg,
            });
            this.emptyUser();
          }
        })
        .catch(() => {
          this.fullscreenLoading = false;
        });
    },
    cancelAddUser () {
      this.addstaff = false;
      this.emptyUser();
    },
    modifyDepart (index, item) {
      this.addDepartForm.name = item.name;
      this.addDepartForm.id_admin = item.id_admin;
      this.addDepartForm.id = item.id;
      this.adddepart = true;
    },
    delDepart (index, item) {
      this.$confirm(
        "此操作将删除该部门[" + item.name + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.fullscreenLoading = true;
          this.$axios
            .get("/api/depart/del", { id: item.id })
            .then((e) => {
              this.fullscreenLoading = false;
              if (e.data.code == 302) {
                this.$message({
                  type: "warning",
                  message: e.data.msg,
                });
              } else {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }

              this.reqDepartList();
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
        })
        .catch(() => { });
    },
    getUserList (query) {
      this.reqUserList({ name: query }, (ret) => {
        this.departUsers = ret;
      });
    },
    cancelAddDepart () {
      this.adddepart = false;
      this.emptyDepart();
    },
    addDepartPost () {
      this.adddepart = false;
      this.fullscreenLoading = true;
      post("/api/depart/add", this.addDepartForm)
        .then((res) => {
          this.fullscreenLoading = false;
          if (res.data.code == 1) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.reqDepartList();
            this.emptyDepart();
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg,
            });
            this.emptyDepart();
          }
        })
        .catch(() => {
          this.fullscreenLoading = false;
        });
    },
    addDepartShow () {
      this.adddepart = true;
      this.emptyDepart();
    },
  },
};
</script>
<style scoped>
.homeWrap {
  background-color: #fff;
  width: 98%;
  margin: 0 auto;
}
.tabswrap {
  margin: 20px 20px;
  padding: 20px 0;
}
.cus-but {
  float: right;
}
</style>